<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>会员注册</title>
		<style>
			#counter {
				font-size: 12px;
				color: rgba(0, 0, 255, 0.5);
				font-weight: lighter;
				display: none;
			}
		</style>
		<link rel="stylesheet" href="css/main.css" />
		<script src="js/jquery/jquery.min.js"></script>
		<script>
			!(function() {
				//闭包
				//邮箱验证规则
				let regEmail = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/;
				//密码验证规则
				let regPassword = /^[^\s]{6,18}$/;
				//验证码规则
				let regCodes = /^[a-zA-Z0-9]{6}$/;
				$(function() {
					//网页加载完毕后执行
					$('#sendMail').click(function() {
						sendEmail()
					});
					//给注册按钮绑定click事件
					$('#resetBtn').click(() => {
						memberRegister();
					});
				});
				/** 发送邮箱验证码
				 *
				 */
				function sendEmail() {
					//获取邮箱验证码
					let email = $(':input[type="email"]').val();
					if ('' == email) {
						alertMessage('请输入邮箱');
						return;
					}
					if (!regEmail.test(email)) {
						alertMessage('邮箱格式错误');
						return;
					}

					//1.验证邮箱是否填写
					//2.验证邮箱规则
					//3.调用后台接口发送邮箱验证码
					$.ajax({
						url: 'http://127.0.0.1:9588/member/send_mail_code',
						type: 'post',
						data: {
							type: 2,
							email
						},
						dataType: 'json',
						success: (responseData) => {
							if (200 != responseData.code) {
								alertMessage(responseData.message);
								return;
							}
							success(responseData.data);
							$('#sendMail').toggle();
							$('#counter').toggle();
							//开启定时器
							let seconds = 300; //验证码有效期倒计时
							let n = window.setInterval(function() {
								$('#counter').text(`${seconds}秒`);
								seconds--;
								console.info(seconds)
								if (0 == seconds) {
									//关闭定时器
									window.clearInterval(n);
									$('#counter').empty();
									$('#sendMail').toggle();
									$('#counter').toggle();
								}
							}, 1000);
						},
						error: () => {
							alertMessage('发送邮件验证码失败')
						}
					});
				}
				/**
				 * 会员注册
				 */
				function memberRegister() {
					//获取注册form表单控件值
					let email = $(':input[type="email"]').val();
					let newPassword = $('#newPassword').val();
					let cPassword = $('#cPassword').val();
					let codes = $('#codes').val();
					//验证数据
					//1.邮箱规则
					if ('' == email) {
						alertMessage('请输入邮箱');
						return;
					}
					if (!regEmail.test(email)) {
						alertMessage('邮箱格式错误');
						return;
					}
					//2.密码规则
					if ('' == newPassword) {
						alertMessage('请输入新密码');
						return;
					}
					if (!regPassword.test(newPassword)) {
						alertMessage('密码为6-18个非空白字符');
						return;
					}
					if ('' == cPassword) {
						alertMessage('请输入确认密码');
						return;
					}
					if (newPassword !== cPassword) {
						alertMessage('两次密码输入不一致');
						return;
					}
					//3.验证码规则
					if ('' == codes) {
						alertMessage('请输入验证码');
						return;
					}
					if (!regCodes.test(codes)) {
						alertMessage('验证码由6位大小写字母、数字组成');
						return;
					}
					$.ajax({
						url: 'http://127.0.0.1:9588/member/reset_password',
						type: 'post',
						data: {
							email,
							newPassword,
							cPassword,
							codes
						},
						dataType: 'json',
						success: (responseData) => {
							if (200 != responseData.code) {
								alertMessage(responseData.message);
								return;
							}
							//操作影响行数,注册一个会员信息,影响行数应该为1
							let rows=responseData.data;
							if(1==rows){
								 success('修改密码成功,即将跳转登录页面',()=>{
									 window.location.href='login.html';
								 });
							}else{
							alertMessage('重置密码,服务器返回未知操作状态');
							}
						},
						error: () => {
							alertMessage('注册失败,请稍后再试');
						}
					});
				}
				/**警告
				 * @param {Object} message
				 */
				function alertMessage(message,fn) {
					$('#message').html(`&chi;${message}`).css({
						color: 'red'
					});
					$('#message').fadeToggle();
					$('#message').fadeToggle(2000, fn||function() {
						//清空错误信息
						$(this).empty();
					});
				}
				/**成功信息
				 * @param {Object} info
				 */
				function success(info,fn) {
					$('#message').html(`&radic;${info}`).css({
						color: 'blue'
					});
					$('#message').toggle();
					$('#message').toggle(1000, fn||function() {
						//清空错误信息
						$(this).empty();
					});
				}
			})();
		</script>
	</head>
	<body>
		<div>
			<div>
				<div class="logo"></div>
				<div><span><a href="#">首页</a></span></div>
			</div>
			<div class="form-container">
				<form action="#" method="post">
					<div><span>忘记密码</span></div>
					<div><input type="email" class="form-input" name="email" placeholder="电子邮件" /></div>
					<div><input type="password" class="form-input" placeholder="新密码为6-18个非空白字符" name="newPassword" id="newPassword" />
					</div>
					<div><input type="password" class="form-input" placeholder="确认密码必须与新密码相同" name="password" id="cPassword" />
					</div>
					<div><input type="text" class="form-input" placeholder="验证码" style="padding-right: 200px;" id="codes" />
						<span style="float:right;position: relative;bottom:36px;margin-right: 10px;line-height: 36px;"><a
								href="javascript:void(0)" id="sendMail">发送邮件验证码</a><span id="counter"></span>
					</div>
					<div><input type="button" class="action-btn" value="重置密码" id="resetBtn"></div>
					<div><span style="color: #adadad;">已有帐号</span><a href="#">登录</a></div>
					<div style="text-align: center;font-size: 13px;"><span id="message" style="display:none"></span></div>
				</form>
			</div>
			<div class="bottom">
				<div><span>Copyright</span><span>&copy;</span><span>2001-2025</span><span>欣欣视频网</span></div>
			</div>
		</div>
	</body>
</html>